<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>渠道池视图</title>
<%@ include file="/base/base.jsp" %>

<style type="text/css">
.btn_a {
	display: block;
	float: left;
	width: 80px;
	height: 20px;
	background: #CCCCCC;
	border: 1px solid black;
	cursor: pointer;
	margin-right: 3px;
	color: black;
}

.btn_a:HOVER {
	background: #7EC0EE;
}

input[type='text'] {
	height: 23px;
}

select {
	height: 23px;
}

#result_table,#result_table tr,#result_table td {
	border-color: #D2D2D2;
}
ul{ margin:0px; padding:0px;}
li{ float:left; cursor:pointer;}
.map_div{ width:1000px; height:30px; background-color:#CCCCCC; overflow:hidden;}
#dh_li{ width:900px; height:30px; background-color:#CCCCCC; white-space:nowrap;    text-overflow:ellipsis; overflow:hidden; text-overflow:ellipsis; display:block; after:content:"...";}
#dh_li li{ width:129px; height:30px; background-color:#CCCCCC; color:#000000; border-right:1px solid #000000; text-align:center; padding-top:5px; overflow:hidden;}
#dh_li li a:link{ color:#000000;text-decoration:none;}
#dh_li li a:visited{ color:#000000;text-decoration:none;}
#dh_li li a:hover{ color:#000000;text-decoration:none;}
.dh_li{ width:50px; height:30px; font-size:20px; font-weight:bold; color:#000000; text-align:center; padding-top:5px; background-color:#CCCCCC;
list-style:none;}
</style>

<script type="text/javascript">


/*
function loadChannels(){
	$.ajax(
			{
				url:url,
				type:"get",
				async: false,
				dataType:"json",
				success:function(data){

				},
			 	error:function(){
			 		alert(msg+",服务器异常，请稍后再试！");
			 		isSuccess = false;
			 	}			
			}
		);
	
}
*/

var channels = {};
<s:iterator var="channel" value="vo.channels">
channels['${channel.code}']='${channel.name }';
</s:iterator> 


//表格列数据
var columns=[
	{display:"序号",width:80,render:function(rowData,rowIndex){
		return (parseInt(this.get("page"))-1)*parseInt(this.get("pageSize"))+rowIndex+1;
	}},
	{display:"IP",width:130,name:"ip"},
	{display:"端口",name:"port",width:130},
	{display:"所属区域",name:"area",width:130},
	{display:"响应时间",name:"responseTime",width:130,render:function(rowData){
		return (rowData.responseTime+" ms");
	}},
	{display:"检索渠道",name:"",width:130,render:function(rowData){
		var channelCode = $("#channelCode").val();
		if(channelCode!=''){
			return channels[channelCode];
		}else{
			return '';
		}
		
	}},
	{display:"最后检索时间",name:"retrieveTimeStr",width:130}
];
$(function(){
	initTime();
	initGrid();
});
//初始化日期时间
function initTime(){
	var now=new Date();
	var year=now.getFullYear();
	var month=now.getMonth()+1;
	month=month<10?"0"+month:month+"";
	var date=now.getDate();
	date=date<10?"0"+date:date+"";
	var start=year+"-"+month+"-"+date+" 00:00:00";
	var hour=now.getHours();
	hour=hour<10?"0"+hour:hour+"";
	var minute=now.getMinutes();
	minute=minute<10?"0"+minute:minute+"";
	var second=now.getSeconds();
	second=second<10?"0"+second:second+"";
	var end=year+"-"+month+"-"+date+" "+hour+":"+minute+":"+hour;
	$("#start_retrieveTimeStr").val(start);
	$("#end_retrieveTimeStr").val(end);
}

function initGrid(){
	var url="<%=request.getContextPath()%>/pools/channelPool/search.action";
	$("#ressult_div").ligerGrid({
			height : '100%',
			width : '100%',
			columns : columns,
			enabledSort : false,
			pageSize : 50,
			root : "result",//数据集合
			record : "dataSize",//总数据数
			pageParmName : "pageIndex",//页索引
			pagesizeParmName : "pageLen",//页长
			usePager : true,
			dataAction : "server",
			onAfterShowData : refreshCount,
			method : "post",
			delayLoad : false,//初始化是否加载
			onAfterEdit:"refreshCount",
			pageSizeOptions : [ 20, 50, 100, 200 ],
			url : url
		});
		var manager = $("#ressult_div").ligerGetGridManager();
		manager.set("height", "100%");
	}
	
	function refreshCount(e){
		var total = Number(this.get("total"));
		var threadMaxIpCount = Number('${vo.threadMaxIpCount }');
		var threadCount =  Math.ceil(total/threadMaxIpCount);
		if(threadCount != 0){
		threadCount = total%threadMaxIpCount!=0?threadCount+1:threadCount;
		}else{
			threadCount = 1;
		}
		$("#currNum").html(total);
		$("#threadCount").html(threadCount);
	}
	

	function realTimesearch(channelCode){
		$("#channelCode").val(channelCode);
		var url="<%=request.getContextPath()%>/pools/channelPool/search.action";
		var manager = $("#ressult_div").ligerGetGridManager(); 
	    manager.set("newPage",1);
	    //alert($('#realTimeSearch_form').serialize());
	    //manager.set("data",$('#realTimeSearch_form').serialize());
	    //manager.loadServerData($('#realTimeSearch_form').serialize()); 
		manager.set("url",url+"?"+$('#realTimeSearch_form').serialize());
	}
	
	function move_right(){
		 if(dh_li.scrollLeft<=(9000-900))
		   dh_li.scrollLeft+=130;
		   
		   }
		   
		function move_left(){
		    if(dh_li.scrollLeft>=0) 
			 dh_li.scrollLeft-=130;
			 }
</script>
</head>
<body>

<div class="main main_max" style="height: 100%">
	<div class="form_body">
		<div class="form_body_tltle">
			渠道池视图
		</div>
		<form id="realTimeSearch_form">
		<input type='hidden' id="channelCode" name="vo.channelCode" value="" />
 
		   <div class="map_div">
		   <ul>
		   <li id="left_" class="dh_li" onclick="move_left();"><<</li> 
				   <li id="dh_li">
				      <div style="width:9000px;">
				          <ul>
						 <s:iterator var="channel" value="vo.channels">
						   <li>
							   <a  href="javascript:void(0)" onclick="realTimesearch('${channel.code}');" />${channel.name }</a>
						   </li>
						 </s:iterator> 
						  </ul>
				      </div>
				    </li>
		      <li id="right_" class="dh_li" onclick="move_right();">>></li>
		   </ul> 
		   </div>

		<table id="result_table" class="form_table">
				<tr style="height:40px; width:100%;">
					<td align="left" width="6%">池大小</td>
					<td align="left" width="6%" id='currNum'>${vo.currNum }</td>
					<td align="left" width="8%">最大使用次数</td>
					<td align="left" width="8%"><font>${vo.ipMaxUsedCount }</font>次</td>
					<td align="left" width="8%">检测间隔时间</td>
					<td align="left" width="8%"><font>${vo.channelInSeparationTime/1000}</font>秒</td>
					<td align="left" width="8%">检出时间间隔</td>
					<td align="left" width="8%"><font>${vo.channelOutSeparationTime/1000}</font>秒</td>
					<td align="left" width="8%">并发线程数</td>
					<td id='threadCount' align="left">${vo.threadCount }</td>
					<td align="left" width="8%">最小值</td>
					<td align="left" width="8%">${vo.channelProxyMin}</td>
					<td align="left" width="8%">最大值</td>
					<td align="left" width="8%">${vo.channelProxMax}</td>
					
				
				</tr>
			</table>
			</form>
		</div>
			<div style="height: 30px"></div>
			<div id="channel_list">
			
		   </div>
			<div id="ressult_div" style="height:100%">
			 <span/>
		   </div>
	
</div>
</body>
</html>